import React from 'react';
import { Breadcrumb, Layout, Menu, theme, Button, Flex, Carousel } from 'antd';
import { Col, Row, Card } from 'antd';
import img1 from '../../../public/icons/图片1.jpg';
import img2 from '../../../public/icons/图片2.jpg';
import img3 from '../../../public/icons/图片3.jpg';
import img4 from '../../../public/icons/图片4.jpg';
import img5 from '../../../public/icons/图片5.jpg';
const { Header, Content, Footer } = Layout;

const items = new Array(0).fill(null).map((_, index) => ({
  key: index + 1,
  label: `nav ${index + 1}`,
}));
const contentStyle: React.CSSProperties = {
  margin: 0,
  height: '80vh',
  color: 'wright',
  lineHeight: '160px',
  textAlign: 'center',
  // background: '#364d79',
};

const Landing: React.FC = () => {
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  const onChange = (currentSlide: number) => {
    console.log(currentSlide);
  };

  return (
    <Layout>
      <Header style={{ display: 'flex', alignItems: 'center' }}>
        <div className="demo-logo" />
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={['2']}
          items={items}
          style={{ flex: 1, minWidth: 0 }}
        />
        <Flex gap="small" wrap>
          <Button
            onClick={() => {
              window.location.href = '/user/login';
            }}
            type="primary"
          >
            登录
          </Button>
          <Button
            onClick={() => {
              window.location.href = '/user/register';
            }}
            type="primary"
          >
            注册
          </Button>
        </Flex>
      </Header>
      <Content
        style={{ padding: '20px 48px', height: '80vh', overflow: 'hidden', alignItems: 'center' }}
      >
        <Carousel
          draggable={true}
          arrows={true}
          afterChange={onChange}
          autoplay={true}
          adaptiveHeight={true}
          style={{ alignItems: 'center', width: '100%', height: '100%' }}
        >
          <div>
            <h3 style={contentStyle}>
              <img
                src={img1}
                alt="Image 1"
                style={{
                  alignItems: 'center',
                  objectFit: 'cover',
                  width: '100%',
                  height: '100%',
                }}
              />
            </h3>
          </div>
          <div>
            <h3 style={contentStyle}>
              <img
                src={img2}
                alt="Image 2"
                style={{
                  right: '2',
                  alignItems: 'center',
                  objectFit: 'cover',
                  width: '100%',
                  height: '100%',
                }}
              />
            </h3>
          </div>
          <div>
            <h3 style={contentStyle}>
              <img
                src={img3}
                alt="Image 3"
                style={{
                  alignItems: 'center',
                  objectFit: 'cover',
                  width: '100%',
                  height: '100%',
                }}
              />
            </h3>
          </div>
        </Carousel>
      </Content>
      <Footer style={{ height: '20vh', textAlign: 'center' }}>
        <Row justify="center" align="middle">
          <Col span={8} style={{ marginRight: '20px' }}>
            <Card style={{ width: 300, margin: '0 auto' }}>
              <p>渠道运营</p>
            </Card>
          </Col>

          <Col span={8} style={{ marginLeft: '20px' }}>
            <Card style={{ width: 300, margin: '0 auto' }}>
              <p>活跃运营</p>
            </Card>
          </Col>
        </Row>
      </Footer>
    </Layout>
  );
};

export default Landing;
